<template>
  <div class="m-25 mt-65">
    <div class="normal-box-mod">

        <!-- title -->
        <div class="normal-box-hd clearfix">
            <div class="normal-box-title">
            <div class="decorate-square"></div>
            <h2>其他数据</h2>
            </div>
        </div>

        <!-- 搜索 -->
        <div class="normal-box-bd">
            <div class="clearfix mb-20">
                <Row>
                    <Col span="5">
                        <sele @ProvinceData="childByValue"></sele>
                    </Col>
                    <Col span="12">
                        <DatePicker v-model="queryData.startTime" :clearable=false :editable=false format="yyyy/MM/dd" type="date" placement="bottom-end" placeholder="开始时间" style="width: 200px"></DatePicker>
                        &nbsp;-&nbsp;
                        <DatePicker v-model="queryData.endTime" :clearable=false :editable=false format="yyyy/MM/dd" type="date" placement="bottom-end" placeholder="结束时间" style="width: 200px"></DatePicker>
                    </Col>
                </Row>

                <br>
                <Input class="mr-10" v-model="queryData.machineCode"  :clearable=true placeholder="机器编号" style="width: 200px"/>
                <Input class="mr-10" v-model="queryData.userName" :clearable=true placeholder="姓名" style="width: 200px"/>
                <Select class="mr-10" v-model="queryData.timeStatus" :clearable=true style="width:200px" placeholder="时间范围">
                    <Option v-for="item in tlist" :value="item.value" :key="item.value">{{ item.label }}</Option>
                </Select>
                <!-- <Checkbox v-model="queryData.status" :true-value="1" :false-value="0">显示次数</Checkbox> -->
                <Button type="primary" custom-icon="iconfont icon-chaxun"  size="small" @click="getList">查找</Button>
            </div>
        </div>


        <div>
            <i-table stripe highlight-row border :content="self" :columns="Tcolumns" :data="recoverList"></i-table>
        </div>
        <div class="page">
          <Page :total="queryData.totalRecord" :page-size="queryData.limit" :current="queryData.page" show-total show-elevator @on-change="changepage"></Page>
        </div>
        <Modal footer-hide v-model="modalImg">
            <img :src="newImg" alt="图片加载失败" style="width:100%;">
        </Modal>

    </div>
  </div>
</template>

<script>
import gcDispenserApi from "@/api/base_sys/gcDispenser.js";
import Request from "@/api/request.js";
import moment from "moment";
import { Message } from "iview";
import sele from "@/view/test/city.vue"
import global from '@/assets/js/global'
export default {
  components: {
    sele
  },
  data() {
    return {
      url: '/api/gcGarbage/collection',
      recoverList: [],
      keyWords: '',  // 搜索关键字
      index: '',  // 当前编号
      modalImg: false, // 图片框
      newImg: '', // 图片路径


      // 获取数据配置
      queryData: {
        limit: 10,
        page: 1,
        totalRecord: 0,
        userId: '',
        machineId: '',
        startTime: global.time(new Date()),
        endTime: global.time(new Date()),
        status: 0,
        timeStatus: '',
        userName: '', // 姓名
        machineCode: '', // 机器编号
        exclude: 11,
        // 省市区
      },

      //
      tlist: [
        {value: 1,label: '周'},
        {value: 2,label: '月'},
        {value: 3,label: '季'},
        {value: 4,label: '年'},
      ],
      // 表格配置
      self: this,
      Tcolumns: [
          { align:"center", title: "机器编号", key: "machineCode", minWidth: 120},
          { align:"center", title: "姓名", key: "userName", minWidth: 80},
          { align:"center", title: "质量", key: "quality", minWidth: 100,
           render: (c,params)=> {
             let t;
             switch(params.row.quality) {
               case '5': t = '优';break;
               case '4': t = '良';break;
               case '1': t = '差';break;
               default: t = params.row.quality
             }
             return c('div', {},t)}},
          { align:"center", title: "重量", key: "weight", minWidth: 80},
          { align:"center", title: "插入时间", key: "insertTime", minWidth: 125},
      ],

    };
  },
  watch: {
    'queryData.status'(n,o) {
      console.log(n,o);
      console.log('获取数据');
      this.Tcolumns = null
      if(n) {
        this.Tcolumns = [
          { align:"center", title: "姓名", key: "userName", minWidth: 80},
          { align:"center", title: "次数", key: "frequency", minWidth: 80},
          { align:"center", title: "参与率", key: "rate", minWidth: 100,
          render: (c,params)=> {let t = (params.row.rate*100).toFixed(2);return c('div',{},t+'%')}}
        ]
      }else {
        this.Tcolumns = [
          { align:"center", title: "机器编号", key: "machineCode", minWidth: 120},
          { align:"center", title: "姓名", key: "userName", minWidth: 80},
          { align:"center", title: "质量", key: "quality", minWidth: 100,
          render: (c,params)=> {
             let t;
             switch(params.row.quality) {
               case '5': t = '优';break;
               case '4': t = '良';break;
               case '1': t = '差';break;
               default: t = params.row.quality
             }
             return c('div', {},t)}},
          { align:"center", title: "重量", key: "weight", minWidth: 80},
          { align:"center", title: "插入时间", key: "insertTime", minWidth: 125},
        ]
      }
      this.getList()
    }
  },
  async created() {
    await setTimeout({},1000)
    let area = window.defArea
    this.queryData.provid = area[0]
    this.queryData.cityid = area[1]
    this.queryData.distid = area[2]
    this.getList();
  },
  methods: {

    // 获取数据列表
    async getList() {
      this.queryData.startTime = global.time(this.queryData.startTime)
      this.queryData.endTime = global.time(this.queryData.endTime)
      // console.log(this.queryData);
      let data = (await gcDispenserApi.getData(this.url,this.queryData)).data
      console.log('列表：',data);
      this.queryData.totalRecord = data.totalRecord;
      this.recoverList = data.list
    },


    // 分页切换
    changepage(index) {
      this.queryData.page = index;
      this.getList();
    },

    // 改变load状态
    changeLoading() {
      this.newRecover.loading = false;
      this.sf_ctrl.loading = false;
      this.$nextTick(() => {
        this.newRecover.loading = true;
        this.sf_ctrl.loading = true;
      });
    },
    seeImg(qwq) {
      console.log(qwq);
      this.modalImg = true
      this.newImg = qwq
    },
    // 删除
    remove(index) {
     const _id = String(index.id);
      this.$Modal.confirm({
        title: "删除确认",
        content:
          "<p>你确认要删除ID为 <strong>" + _id +
          "</strong> 的回收记录吗？</p>",
        loading: true,
        onOk: async () => {
            let data = (await recoverApi('delete',undefined,_id))
            let result = data.data
            let message = data.message
            if(result) {
              this.$Message.success("操作成功")
              this.getList()
              this.$Modal.remove();
              return
            }
            this.$Message.error(message)
            this.$Modal.remove();
        }
      });

    },

    // 六级联动数据获取
    childByValue(newObject) {
        let area = this.queryData
        area.provid = newObject.provid||'';
        area.cityid = newObject.cityid||'';
        area.distid = newObject.distid||'';
        area.strtid = newObject.strtid||'';
        area.commid = newObject.commid||'';
        area.comminid = newObject.comminid||'';
    },




  },

};
</script>

<style>
    td[class="y ivu-table-column-center"] {background: #02D792 !important; color: #fff;}
    td[class="n ivu-table-column-center"] {background: #f00 !important; color: #fff;}
    .page {padding: 1em .5em;}
</style>
